<template>
	<component ref="wyObject" :is="Form" :fileList="fileList" :formData="wyform" :rules="rules" :save="save"></component>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { post, get } from '@/axios'
import { ElMessage } from 'element-plus'
import Form from './components/form'
import baseapi from '@/api/baseapi'
import api from '@/api/foodapi'
const props = defineProps(['getTable', 'id'])
const emits = defineEmits(['update:show'])
const wyObject = ref()
const fileList = ref([])
const wyform = reactive({
	name: '',
	type: '',
	price: '',
	isHalal: null,
	file: null
})
const rules = {
	name: [
		{ required: true, message: '请输入食品名称', trigger: 'blur' },
		{ max: 30, message: '食品名称最多30个字符', trigger: 'blur' }
	],
	type: [
		{ required: true, message: '请选择食品类别', trigger: 'blur' }
	],
	price: [
		{ required: true, message: '请输入食品价格', trigger: 'blur' },
		{ pattern: /^([1-9]\d*|[0])(\.\d{1,2})?$/, message: '食品价格最多保留两位小数', trigger: 'blur' }
	],
	isHalal: [
		{ required: true, message: '请选择食品是否清真', trigger: 'blur' }
	],
	file: [
		{ required: !props.id, message: '请上传食品图片', trigger: 'blur' }
	]
}
if (props.id) {
	get(api.request_url.getById, { id: props.id }, content => {
		for (const key in wyform) {
			if (Object.prototype.hasOwnProperty.call(content, key)) {
				wyform[key] = content[key]
			}
		}
		wyform.id = props.id
		wyform.price = (content.price / 100).toFixed(2)
		wyform.isHalal = content.isHalal ? 1 : 0
		fileList.value.push({
			url: baseapi.getImageUrl(content.img)
		})
		console.dir(wyform)
	})
}
function save() {
	const form = {...wyform}
	form.price = wyform.price * 100
	post(props.id ? api.request_url.update : api.request_url.add, form, content => {
		emits('update:show', false)
		props.getTable()
	}, wyObject.value.formObj)
}
</script>

<style scoped lang="scss">
</style>